<template>
	<view class="left-bar">
		<text class="category" @click="$emit('loadCategory', index)" :class="choosed ? 'choosed' : ''">
			{{ tag }}
		</text>
	</view>
</template>

<script>
	export default {
		name: "CategoryLeftBar",
		props: {
			tag: {
				type: String,
				default () {
					return "";
				},
			},
			index: {
				type: Number,
				default () {
					return null;
				},
			},
			isEnd: {
				type: Boolean,
				default () {
					return false;
				},
			},
		},

		data() {
			return {
				choosed: false,
			};
		},
		created() {
			if (this.isEnd) {
				this.$emit("doneCategory");
			}
		},
	};
</script>
<style lang="scss" scoped>
	.category {
		height: 100rpx;
		background-color: rgb(240, 240, 240);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.choosed {
		background-color: white;
		color: #ff534d;
		border-left: 6rpx solid #ff534d;
	}
	
</style>
